<!-- :placeholder="ruleItem.hint"  -->
<template>
  <div class="rule-item-css">
    <div v-text="ruleItem.textBefore"></div>
    <el-tooltip :open-delay="1000" :disabled="!getTextWidthOd" :content="getLabel" placement="top" effect="light">
      <el-select v-model="params[ruleItem.fields]"
                @change="selectchange"
                placeholder=""
                size="mini"
                clearable
                filterable
                v-loading="loading"
                element-loading-spinner="el-icon-loading"
                default-first-option
                :style="{ width: ruleItem.width ? `${ruleItem.width}px` : '100%' }"
                class="select-box">
        <el-option v-for="(o,ii) in sort(selectDataObj[`${ruleItem.fields}ListsOrigin`],ruleItem.selectLabel)"
                  :key="ii"
                  :value="o[ruleItem.selectValue]"
                  :label="o[ruleItem.selectLabel]"></el-option>
      </el-select>
    </el-tooltip>
    <div v-html="ruleItem.textAfter"></div>
  </div>
</template>

<script>
import mixinTypeViewModule from '@/mixins/next-ticket-rule-view-module'
import { Cascader } from './cascader.js'
export default {
  mixins: [mixinTypeViewModule],
  data () {
    return {
    }
  },
  props: {
    currIndex: {
      type: Number
    }
  },
  mounted () {
    if (this.ruleItem.connectId) {
      Cascader.$emit(`connect-${this.ruleItem.connectId}-${this.currIndex}`, this.params[this.ruleItem.fields], false)
    }
  },
  computed: {
    getLabel () {
      let currList = this.selectDataObj[`${this.ruleItem.fields}ListsOrigin`]
      let optionsdata = currList && currList.find(e => e[this.ruleItem.selectValue] === this.params[this.ruleItem.fields])
      if (optionsdata) return optionsdata[this.ruleItem.selectLabel]
      else return ''
    }
  },
  methods: {
    sort (val, o) {
      val = this._.cloneDeep(val)
      if (val) {
        var temp = val.sort(function (a, b) {
          return a[o].localeCompare(b[o])
        })
        return temp
      }
    },
    selectchange (data) {
      this.$forceUpdate()
      var optionsdata = this.selectDataObj[`${this.ruleItem.fields}ListsOrigin`]
      optionsdata.forEach(element => {
        if (element[this.ruleItem.selectValue] === data) {
          this.params.name = element.name
        }
      })
      if (this.ruleItem.connectId) Cascader.$emit(`connect-${this.ruleItem.connectId}-${this.currIndex}`, data, true)
    }
  },
  destroyed () {
    Cascader.$off(`connect-${this.ruleItem.connectId}-${this.currIndex}`)
  }
}
</script>

<style scoped lang='scss'>
.rule-item-css {
  display: flex;
  justify-content: flex-start;
  .select-box {
    margin: 0 10px;
  }
}
::v-deep .el-loading-spinner{
  top: 66%;
  left: 20px;
  text-align: left;
}
</style>
